<template>
    <div class="shop">
        <hr>
        <h1>附近店铺</h1>
        <ul>
            <li :ref="(el) => setItemRefs(el, item)" v-for="item in goodslist" :key="item.id" @click="desc(item.id)">
                <img :src="item.s_goods_photos[0].path" alt="" />
                <h4 class="name">{{ item.name }}</h4>
                <p class="desc">{{ item.desc }}</p>
                <p class="price"><span>¥:</span>{{ item.price }}<span>.00</span></p>
            </li>
        </ul>
        
    </div>
</template>

<script setup>



import { onMounted, ref, defineProps, defineEmits } from "vue";
import { useRouter } from "vue-router"
let router = useRouter()


let itemRefs = []
const setItemRefs = (el, item) => {
    itemRefs.push({
        el,
        item
    })
}

onMounted(() => {
    setTimeout(() => {
        let column = 2;
        let array = [];
        for (let i = 0; i < itemRefs.length; i++) {
            if (i < column) {
                itemRefs[i].el.style.top = "20px";
                itemRefs[i].el.style.left = itemRefs[0].el.clientWidth * i + "px";

                array.push(itemRefs[i].el.clientHeight)
                // console.log(array);
            } else {
                let minHeight = Math.min(...array)
                // console.log(minHeight);
                let index = array.findIndex(item => item === minHeight)
                itemRefs[i].el.style.top = array[index] + 25 + "px";
                itemRefs[i].el.style.left = itemRefs[index].el.offsetLeft + "px";
                array[index] += itemRefs[i].el.clientHeight
            }
        }
    }, 2000)
})

defineProps({
    goodslist: Array,
})
let emits = defineEmits(["touch"])
document.addEventListener("scroll", function () {
    let { scrollHeight, scrollTop, clientHeight } = document.documentElement
    if (scrollHeight - scrollTop - 3 <= clientHeight) {
        console.log("触底了");
        emits("touch")
    }
})
//详情
const desc = (id) => {
    console.log(id);
    router.push(`/goodsdetail/${id}`)
}

</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.shop {
    width: 3.75rem;

    hr {
        width: 3.75rem;
        height: .1rem;
        background-color: #F1F1F1;
        border: none;
    }

    h1 {
        width: 3.39rem;
        height: .55rem;
        margin: 0 auto;
        font-size: .18rem;
        line-height: .55rem;
    }

    ul {
        position: relative;
        width: 100%;
        height: 100%;
        list-style: none;
        box-sizing: border-box;
        background-color: rgb(102, 102, 102);


        li {
            position: absolute;
            width: 1.875rem;
            // height: auto;
            box-sizing: border-box;
            list-style: none;
            background-color: aliceblue;
            margin-bottom: .2rem;
            padding: .1rem;


            img {
                width: 100%;
                height: 100%;
                display: block;
                height: auto;
            }




            h4 {
                height: .16rem;
                font-size: .15rem;
                margin-top: .05rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .desc {
                font-size: .14rem;
                margin-top: .05rem;
            }

            span {
                font-size: .15rem;
            }

            .price {
                color: red;
                font-size: .2rem;
                margin-top: .05rem;
            }
        }
    }

    // 
    // .nearby_shop {
    // padding: 0 0.1rem;
    // box-sizing: border-box;
    // .item {
    //     height: auto;
    //     width: 1.659rem;
    //     margin-top: 0.2rem;
    //     box-sizing: border-box;
    //     background-color: #fff;
    //     padding: 0.1rem;
    //     box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 8px;
    //     border-radius: 0.1rem;
    //     img {
    //         width: 100%;
    //         display: block;
    //         height: auto;
    //     }
    //     .goodsMsg {
    //         .goodsName {
    //             margin: 0.1rem 0;

    //             p {
    //                 font-size: 0.14rem;
    //                 color: #333;
    //                 width: 100%;
    //                 text-overflow: ellipsis;
    //                 white-space: nowrap;
    //                 overflow: hidden;
    //             }
    //         }
    //         .goodsDesc {
    //             display: -webkit-box;
    //             -webkit-box-orient: vertical;
    //             -webkit-line-clamp: 2;
    //             overflow: hidden;
    //             margin-bottom: 0.04rem;
    //             color: #666;
    //         }
    //         .price {
    //             p {
    //                 font-size: 0.2rem;
    //                 color: #ff4142;
    //                 margin: 0.03rem 0;
    //                 box-sizing: border-box;
    //                 span {
    //                     font-size: 0.06rem;
    //                     color: #999;
    //                     margin-left: 0.03rem;
    //                     display: inline-block;
    //                 }
    //                 strong {
    //                     font-size: 0.14rem;
    //                     margin-left: 0.04rem;
    //                 }
    //             }
    //         }
    //     }
    // }
    // }

}
</style>